<template>
  <div id="article">
    <!-- 导航栏 -->
    <van-nav-bar left-arrow @click-left="$router.back()" fixed placeholder>
      <template #right>
        <van-icon name="ellipsis" size="20px" @click="showShare = true" />
        <van-share-sheet
          v-model="showShare"
          title="分享到"
          :options="options"
          @select="onSelect"
        />
      </template>
    </van-nav-bar>
    <!-- 文章内容 -->
    <div class="container">
      <!-- 文章发布人 -->
      <div class="article-content" ref="articleContent">
        <div
          class="articleContentTop"
          ref="articleContentTop"
          style="max-height: 2000px"
        >
          <!-- 发布标题 -->
          <h2 class="title">{{ title }}</h2>
          <!-- 骨架 -->
          <van-skeleton title avatar :row="3" :loading="!article._id">
            <!-- 发布人信息 -->
            <div class="userInfo">
              <!-- 发布人头像 -->
              <div class="Authorimage">
                <van-image
                  round
                  width="3rem"
                  height="3rem"
                  :src="article.avatar"
                  fit="cover"
                />
              </div>
              <!-- 发布人 -->
              <div class="TheAuthor">
                <!-- 发布人昵称，发布时间 -->
                <div class="ALeft">
                  <div class="AuthorName">{{ article.author }}</div>
                  <div class="AuthorInfo">{{ article.time | dateFormat }}</div>
                </div>
                <!-- 关注发布者 -->
                <div class="Focuson">{{ FocusonOn }}</div>
              </div>
            </div>
            <!-- 文章文本 -->
            <div class="ArticleP">
              <div
                class="imgBox"
                :class="{
                  none: article.poster_type == 1,
                  articlesingleImg: article.poster_type == 2,
                  articlesmoreImg: article.poster_type == 3,
                }"
              >
                <img :src="img" v-for="img in article.imageSrc" :key="img" />
              </div>
              <div class="ActicleText" v-html="article.content"></div>
            </div>
          </van-skeleton>
          <!-- 骨架 -->

          <!-- 分割线 -->
          <van-divider
            :hairline="false"
            :style="{
              borderColor: '#8b69a9',
              padding: '0 5px',
              margin: '0',
            }"
          />
        </div>

        <!-- 评论 -->
        <div class="ActicleComments" style="min-height: calc(100vh - 180px)">
          <!-- 评论标题 -->
          <div class="Aup">
            <!-- 评论数 -->
            <div class="Aleft">
              <p style="font-size: 16px">评论 {{ article.comment }}</p>
            </div>
            <!-- 评论赞,踩数 -->
            <div class="Aright">
              <p>{{ article.like }} 赞 | 3 转发</p>
            </div>
          </div>
          <van-list
            v-model="commentLoading"
            :finished="commentFinished"
            finished-text="没有更多了"
            @load="getCommentList"
          >
            <div class="AUnder" v-for="item in commentList" :key="item._id">
              <!-- 评论信息 -->
              <div class="CommentsInfo">
                <!-- 评论人头像，昵称 -->
                <div class="Cleft">
                  <van-image
                    round
                    width="2rem"
                    height="2rem"
                    :src="item.info.avatar"
                    fit="cover"
                  />
                  <div class="CommentsName">{{ item.info.nickname }}</div>
                </div>
                <!-- 赞，踩 -->
                <div class="Cright">
                  <div class="Onlike">
                    <van-icon
                      :name="item.is_like ? 'good-job' : 'good-job-o'"
                      :color="item.is_like ? '#ec0f0c' : '#777'"
                      :background-color="item.is_like ? '#ec0f0c' : '#777'"
                    />
                    <span class="like_count">{{
                      item.like_count == 0 ? "" : item.like_count
                    }}</span>
                  </div>
                  <div class="Unlike">
                    <img
                      src="@/img/cai.png"
                      style="width: 14.8px; color: #000"
                    />
                  </div>
                </div>
              </div>
              <!-- 评论内容 -->
              <div class="CommentsText">{{ item.content }}</div>
              <!-- 评论时间，回复 -->
              <div class="CommentsTime">
                <div class="CommentsReply">
                  {{ item.reply_num == 0 ? "" : item.reply_num }} 回复 >
                </div>
                <span class="create_time">{{
                  item.create_time | dateFormat
                }}</span>
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <!-- 写评论 -->
      <div class="Comments" @click="openPopup">
        <van-icon name="edit" size="20px" />
        <p>写评论...</p>
      </div>
      <van-popup
        v-model="showPopup"
        overlay-class="Overly"
        :close-on-click-overlay="true"
        position="bottom"
        :style="{ height: '21.7%' }"
      >
        <van-field
          v-model="content"
          type="textarea"
          placeholder="友善是交流的起点"
        />
        <van-button type="info" @click="addComment" block>发布</van-button>
      </van-popup>
      <!-- 多功能按钮 -->
      <div class="right">
        <!-- 评论图标 -->
        <div class="chat" @click="Comments">
          <van-icon
            name="chat-o"
            size="23px"
            v-if="!article.comment || article.comment == 0"
          />
          <van-icon name="chat-o" size="23px" v-else :badge="article.comment" />
        </div>
        <!-- 收藏图标 -->
        <div class="star">
          <van-icon
            :name="article.is_fav ? 'star' : 'star-o'"
            size="23px"
            :color="article.is_fav ? '#f4d44b' : '#777'"
            :background-color="article.is_fav ? '#f4d44b' : '#777'"
            @click="toggleFav"
          />
        </div>
        <!-- 点赞图标 -->
        <div class="good-job">
          <van-icon
            size="23px"
            :name="article.is_like ? 'good-job' : 'good-job-o'"
            :color="article.is_like ? '#ec0f0c' : '#777'"
            :background-color="article.is_like ? '#ec0f0c' : '#777'"
            @click="toggleLike"
          />
        </div>
        <!-- 分享图标 -->
        <van-icon name="share-o" size="23px" @click="showShare = true">
        </van-icon>
      </div>
    </div>
  </div>
</template>

<script>
import { ShareSheet, Skeleton, Divider } from "vant"; //分享页面
import {
  getArticleDetail,
  removeFav,
  addFav,
  like,
  unlike,
  addComment,
} from "@/api/home.js";
import { mapState } from "vuex";
import commentList from "./Article.js";

export default {
  data() {
    return {
      content: "", //评论
      comment_type: 0,
      showPopup: false, //评论弹窗
      FocusonOn: "关注",
      article: {}, //文章详情
      article_id: "", //文章id
      title: "", //文章标题
      showShare: false, //分享显示
      articleContentTop: 0, //内容高度
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ], //分享
    };
  },
  mixins: [commentList],
  components: {
    [ShareSheet.name]: ShareSheet,
    [Skeleton.name]: Skeleton,
    [Divider.name]: Divider,
  },
  computed: {
    ...mapState(["uid", "userInfo"]),
  },
  created() {
    let { id, title } = this.$route.query;
    this.article_id = id;
    this.title = title;
    this.getArticleDetail();
  },
  methods: {
    // 文章详情接口
    getArticleDetail() {
      let { article_id, uid: user_id } = this;
      getArticleDetail({
        article_id,
        user_id,
      }).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.article = res.data;
          console.log(this.$refs.articleContentTop.scrollHeight);
          this.$nextTick(function () {
            console.log(this.$refs.articleContentTop.scrollHeight);
            this.articleContentTop = this.$refs.articleContentTop.scrollHeight;
          });
        } else {
          this.$toast(res.msg);
        }
      });
    },
    // 评论
    addComment() {
      let { uid: user_id, article_id, content, comment_type } = this;

      content = content.trim();
      if (content.length == 0) {
        this.$toast("请输入内容");
        return;
      }
      addComment({ user_id, article_id, content, comment_type }).then((res) => {
        this.$toast(res.msg);
        if (res.code == 0) {
          this.showPopup = false;
          this.article.comment++;
          this.content = "";

          // 严谨 但是缺少用户体验
          // this.ship = 0;
          // this.commentFinished = false;
          // this.commentList = [];
          // this.getCommentList();
          // 组装数据
          let { avatar, nickname, username } = this.userInfo;

          let commentData = {
            article_id,
            comment_type: 0,
            content,
            create_time: new Date().getTime(),
            info: {
              avatar,
              nickname,
              username,
            },
            is_like: false,
            like_count: 0,
            relp_comment_id: "",
            reply_num: 0,
            user_id,
            _id: res.data.id,
          };
          this.commentList.unshift(commentData);

          this.$refs.articleContent.scrollTo(0, this.articleContentTop);
        }
      });
    },
    // 打开评论输入框
    openPopup() {
      if (!this.checkLongin()) return;
      this.showPopup = true;
    },
    // 评论按钮
    Comments() {
      console.log(this.articleContentTop);
      this.$refs.articleContent.scrollTo(0, this.articleContentTop);
    },
    // 收藏
    toggleFav() {
      if (!this.checkLongin()) return;
      let {
        article: { is_fav },
        uid,
        article_id,
      } = this;

      if (is_fav) {
        // 取消收藏
        removeFav({
          user_id: uid,
          article_id,
        }).then((res) => {
          console.log(res);
          this.$toast("取消收藏");
          if (res.code == 0) {
            this.article.is_fav = false;
          }
        });
      } else {
        // 收藏
        addFav({
          user_id: uid,
          article_id,
        }).then((res) => {
          console.log(res);
          this.$toast(res.msg);
          if (res.code == 0) {
            this.article.is_fav = true;
          }
        });
      }
    },
    // 点赞
    toggleLike() {
      if (!this.checkLongin()) return;
      let {
        article: { is_like },
        uid,
        article_id,
      } = this;

      if (is_like) {
        // 取消点赞
        unlike({
          user_id: uid,
          article_id,
        }).then((res) => {
          console.log(res);
          this.$toast(res.msg);
          if (res.code == 0) {
            this.article.is_like = false;
          }
        });
      } else {
        // 点赞
        like({
          user_id: uid,
          article_id,
        }).then((res) => {
          console.log(res);
          this.$toast(res.msg);
          if (res.code == 0) {
            this.article.is_like = true;
          }
        });
      }
    },
    // 分享
    onSelect(options) {
      this.$toast("分享到" + options.name);
      this.showShare = false;
    },
  },
};
</script>

<style lang="less" scoped>
#article {
  width: 100%;
}
.article-content {
  height: calc(100vh - 150px);
  overflow-y: auto;
  padding-bottom: 45px;
  .title {
    font-size: 20px;
    color: #000;
    padding: 20px;
    background-color: #fff;
    margin: 0;
  }
}
.bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 50px;
  width: 100%;
  border-top: 1px solid #eee;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .van-popup {
    overflow: hidden;
    .van-field {
      width: 95%;
      height: auto;
    }
    .van-button--block {
      width: 100%;
      background-color: #8b69a9;
      border: #8b69a9;
    }
  }
}
.Comments {
  margin: 10px 10px 10px 15px;
  height: 30px;
  width: 40%;
  border: 1px solid #eee;
  border-radius: 30px;
  background-color: #eee;
  display: flex;
  align-items: center;
  .van-icon {
    margin-left: 5px;
  }
  p {
    margin-left: 5px;
    font-size: 15px;
  }
}
.right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  height: 30px;
  margin: 10px;
}
.container {
  height: 100%;
  margin-bottom: 50px;
}
.userInfo {
  height: 50px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .Authorimage {
    width: 10%;
  }
  .TheAuthor {
    width: 85%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .ALeft {
      font-size: 16px;
      .AuthorInfo {
        font-size: 12px;
        color: #bcbcbc;
      }
    }
    .Focuson {
      width: 50px;
      text-align: center;
      padding: 5px;
      border: 1px solid #eee;
      border-radius: 5px;
      font-size: 14px;
      background-color: #8b69a9;
      color: #fff;
    }
  }
}
.ArticleP {
  margin: 20px;
  img {
    height: 300px;
    max-width: 100%;
  }
  .articlesmoreImg img {
    width: 100%;
    height: 500px;
  }
  .imgBox {
    margin-bottom: 10px;
  }
  .ActicleText {
    overflow: hidden;
    line-height: 1.5em;
  }
}
.ActicleComments {
  padding: 10px 20px 20px 20px;
  .Aup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .Aright {
      color: rgb(183, 183, 183);
      font-size: 12px;
    }
  }
  .AUnder {
    padding-top: 20px;
    .CommentsInfo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .Cleft {
        width: 200px;
        display: flex;
        justify-content: start;
        align-items: center;
        .CommentsName {
          margin-left: 10px;
          font-size: 14px;
        }
      }
      .Cright {
        width: 60px;
        height: 30px;
        display: flex;
        justify-content: space-between;
        .Unlike {
          padding-top: 3px;
        }
      }
    }
  }
}
.van-popup {
  border-top: 1px solid #eee;
}
::v-deep .Overly {
  background-color: rgba(183, 183, 183, 0);
}
.van-cell {
  margin: 10px;
  background-color: #f7f7f7;
  width: 300px;
}
.CommentsText {
  padding: 10px 30px;
}
.CommentsTime {
  margin: 0;
  width: 250px;
  height: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .CommentsReply {
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 30px;
    background-color: #eee;
  }
  .create_time {
    color: rgb(204, 204, 204);
    font-size: 12px;
  }
}
</style>